<template>
    <div class="layout">
        <!-- 引入editor.md的样式，因为不是标准的vue组件，无法通过import引入样式 -->
        <link rel="stylesheet" href="/editor-md/css/editormd.css" />
        <div :id="id"></div>
    </div>
</template>
<script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator';
    import scriptjs from "scriptjs";
    import $ from "jquery"
    //用于生成随机id，vue-cli自带

    @Component
    export default class Editormd extends Vue {
        // @Prop({ default: "editor-md" })
        public id: string = "123";

        // @Prop({ default: {} })
        // public config: any = {};

        public instance: any = null;
        public editorPath: any = "/editor-md";//editor.md的路径
        public defaultConfig: any =  {
            // width: "100%",
            // height: '450px',
            // path: "/editor-md/lib/",//lib的路径
            // codeFold: true,
            // saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
            // emoji: true,
            // imageUpload: true,
            // imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            // imageUploadURL: "./php/upload.php"

            //width: "90%",
            //height: 740,
            path : "/static/editor-md/lib/",
            theme : "default",
            previewTheme : "default",
            editorTheme : "default",
            // markdown : "fasfas",   //动态设置的markdown文本
            codeFold : true,
            //syncScrolling : false,
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            // searchReplace : true,
            //watch : false,                // 关闭实时预览
            htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
            //toolbar  : false,             //关闭工具栏
            // previewCodeHighlight : true, // 关闭预览 HTML 的代码块高亮，默认开启
            // emoji : true,
            taskList : true,
            // preview: false,
            tocm            : true,         // Using [TOCM]
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : false,             // 开启流程图支持，默认关闭
            sequenceDiagram : false,       // 开启时序/序列图支持，默认关闭,
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "./php/upload.php",
        };
        created() {
            let that = this;
            console.log(scriptjs)
            window.$=window.jQuery=$;
            scriptjs(
                [
                    // that.editorPath + '/lib/jquery.min.js',//加载完jquery后再加载editormd
                    // that.editorPath + '/lib/zepto.min.js',//加载完jquery后再加载editormd
                    // that.editorPath + '/lib/require.js',//加载完jquery后再加载editormd
                    // that.editorPath + '/lib/jquery.flowchart.min.js',//加载完jquery后再加载editormd
                    // that.editorPath + '/lib/raphael.min.js',//加载完jquery后再加载editormd
                  // `https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js`,
                  `${this.editorPath}/lib/jquery.min.js`,
                  `${this.editorPath}/lib/marked.min.js`,
                  `${this.editorPath}/lib/prettify.min.js`,
                  `${this.editorPath}/lib/raphael.min.js`,
                  `${this.editorPath}/lib/underscore.min.js`,
                  `${this.editorPath}/lib/zepto.min.js`
                ],
                () => {
                    scriptjs(that.editorPath + '/editormd.js', () => {
                        this.initEditor();
                    });
                }
            );
        }
        mounted() {

        }

        initEditor() {
            // todo 暂未解决codemirror引入失败问题
            this.$nextTick(() => {
                let editorMD = (<any>window).editormd;
                console.log(editorMD);
                this.instance = editorMD(this.id, this.defaultConfig);
                // this.instance.setPreviewTheme('mdn-like');

                // this.$nextTick(() => {
                //     this.instance = editorMD(this.id, this.defaultConfig);
                // })

            });
            // let editorConfig = Object.assign({}, this.defaultConfig, this.config);

        }
    }
</script>
<style scoped>
    .layout {
        height: 100%;
    }
</style>
